<template>
    <el-dialog title="分类表单" v-model="props['dialogVisible']" width="50%" :before-close="formDialogCancel">
        <el-form :model="state.formData" ref="formData" label-width="100px">
            <el-form-item label="分类标题" prop="acName">
                <el-input v-model="state.formData.acName"></el-input>
            </el-form-item>
            <el-form-item label="上级分类" prop="acC">
                <el-cascader
                    v-model="state.formData.acCatValue"
                    :options="props.catOptions"
                    :props='{
                        value: "id",
                        label: "acName",
                        checkStrictly: true
                    }'
                    @change="cHandleChange" >
                    <template #default="{ node, data }">
                        <span>{{ data.acName }}</span>
                        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                    </template>
                </el-cascader>
            </el-form-item>
            <el-form-item label="显示排序" prop="acSort">
                <el-input v-model="state.formData.acSort"></el-input>
            </el-form-item>
            <el-form-item label="是否显示" prop="acShow">
                <el-radio v-model="state.formData.acShow" :label="0">否</el-radio>
                <el-radio v-model="state.formData.acShow" :label="1">是</el-radio>
            </el-form-item>
            <el-form-item label="关键词" prop="acKeywords">
                <el-input type="textarea" :rows="4" v-model="state.formData.acKeywords"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="acDescript">
                <el-input type="textarea" :rows="4" v-model="state.formData.acDescript"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="formDialogCancel"
                    :loading="props.dialogLoading"
                    :disabled="props.dialogLoading">取 消</el-button>
                <el-button type="primary" @click="formDialogConfirm" 
                    :loading="props.dialogLoading"
                    :disabled="props.dialogLoading">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
    import { onMounted, watch } from 'vue'
    import { useRoute } from 'vue-router'
    import { computed, reactive, ref } from 'vue';
    import { request } from "@/utils/request";
    import { ElMessage } from 'element-plus'
    import store from '@/store'
    import { BASE_URL, TOKEN_NAME } from '@/config/setting.config.js'

    let props = defineProps({
        id: {
            default: '',
            type: String
        },
        dialogVisible: {
            default: false,
            type: Boolean
        },
        dialogLoading: {
            default: false,
            type: Boolean
        },
        catOptions: {
            default: [],
            type: Array
        }
    })

    let state = reactive({
        formData: {
            artCatValue: []
        }
    })

    let emits = defineEmits(['formDialogCancel', 'formDialogConfirm'])

    let dialogVisible = computed(()=>{
        let dialogVisible = props['dialogVisible'];
        return dialogVisible;
    })
    watch(dialogVisible, (dialogVisible) => {
        if(dialogVisible) {
            state.formData = {};
        }
    })

    let id = computed(()=>{
        let id = props['id'];
        return id;
    })
    watch(id, (id) => {
        if(id) {
            request({
                url: '/artcat/detail',
                method: 'get',
                params: {
                    id: id
                }
            }).then(function (res) {
                if(res.data.acPidPath) {
                    res.data.acCatValue = res.data.acPidPath.split('/');
                }
                state.formData = res.data;          
            }).catch(function (error) {
                console.log('失败', error);
            });
        }
    }, {deep: true, immediate: true})

    let formDialogCancel = () => {
        emits('formDialogCancel');
    }

    let formDialogConfirm = () => {
        emits('formDialogConfirm', state.formData);
    }

    let cHandleChange = (val) => {
        let acPidPath = '';
        for(let i = 0; i < val.length; i ++) {
            acPidPath += (i>0?'/':'') + val[i];
        }
        state.formData.acPidPath = acPidPath;
        state.formData.acPid = val[val.length - 1];
    }
</script>